<template>
	<view class="mian my-order">
		<view class="input">
			<u-search placeholder="输入关键字" @search='search()' @change="change()" @clickIcon='search()' shape='square'
				v-model="model.keyword"></u-search>
			<view style="width: 200rpx; margin-left: 20rpx;">
				<u-button text="添加商品" shape='circle' @click="addEdit(null)" type="primary"></u-button>
			</view>
		</view>
		<view style="background-color: #fff;">
			<u-tabs :list="titleList" :scrollable="false" @change="selec" lineColor="rgb(234,92,32)"></u-tabs>
		</view>

		<view class="list" style="height: calc(100vh - 100rpx - 100px);">
			<u-list @scrolltolower="scrolltolower" v-if="list.length" height="calc(100vh - 100rpx - 100px) ">
				<u-list-item v-for="(item,index) in list" :key="item.id">
					<view class="item">

						<view style="display: flex; padding: 20rpx 35rpx; border-bottom: 1rpx solid #eee;">

							<view class="pictrue img-back-covor" style="margin-right: 20rpx;width: 120rpx; height: 120rpx;">
								<image :src="item.image" style="" class="img-covor" lazy-load mode="aspectFill"></image>
							</view>
							<view class="text acea-row row-between" style="width: calc( 100% - 142rpx );">
								<view class="name line2" style="width: 200rpx;">{{ item.storeName }}</view>
								<view class="money" style="text-align: right;color: red;">
									<view class="">
										￥<text style="font-size: 20px;margin-right: 5rpx;">{{item.price}}</text>
										<text
											style="font-size: 16px;color: #999999;text-decoration-line: line-through;">{{item.otPrice}}</text>
									</view>
									<view style="text-align: right;color: #000;font-size: 16px;">
										库存: <text>{{item.stock}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="bottom acea-row row-right row-middle">
							<template>
								<view class="bnt bg-color-red" style="width: 120rpx;" @click="onsale(item)">
									{{item.isShow==1?'下架':'上架'}}
								</view>
							</template>
							<template>
								<view class="bnt bg-color-red" style="width: 120rpx;" @click="addEdit(item.id)">修改</view>
							</template>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<u-empty v-if="this.list.length<=0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		merProducts,
		onsale
	} from "@/api/business"
	export default {
		data: function() {
			return {
				titleList: [{
						name: '已上架',
						id: 1
					},
					{
						name: '已下架',
						id: 0
					},
				],
				list: [],
				model: {
					page: 1,
					limit: 10,
					keyword: '',
					isShow: 1
				}
			}
		},
		computed: mapGetters(["userInfo"]),
		mounted() {
			this.getProductList()
		},
		methods: {
			change(e) {
				if (!e) this.search()
			},
			//触底刷新
			scrolltolower() {
				this.getProductList()
			},
			//商品上下架
			onsale(item) {
				onsale(item.id, {
					status: this.model.isShow
				}).then(res => {
					uni.$u.toast(this.model.isShow == 1 ? '下架成功' : '上架成功')
					this.search()
				})
			},
			// 切换上下架
			selec(e) {
				this.list = []
				this.model.page = 1
				this.model.isShow = e.id
				this.getProductList()
			},
			// 获取商品列表
			getProductList() {
				merProducts(this.model).then(res => {
					this.list = this.list.concat(res.data)
					this.model.page++
				})
			},
			// 商品搜索
			search() {
				this.list = []
				this.model.page = 1
				this.getProductList()
			},
			//修改商品
			addEdit(id) {
				this.$yrouter.push({
					path: '/storeManagementPack/pages/storeManagement/addProduct/index',
					query: {
						id: id
					}
				})
			}

		}
	}
</script>

<style scoped lang="less">
	/deep/.u-search__action--active {
		display: none;
	}

	/deep/.u-row {
		margin: auto;
		background-color: #fff;
		padding: 15rpx;
		margin: 10rpx 0;
		border-radius: 10rpx;
	}

	.mian {
		width: 100%;

		.input {
			height: 100rpx;
			background-color: #fff;
			display: flex;
			width: 100%;
			padding: 0 20rpx;
			justify-content: space-around;
			padding-top: 20rpx;


		}
	}
</style>